/**
* @author kobe
* @date   10/05/27
*/

(function(lf,r){

	var time = lf.utils.format(new Date(),"yyyy-MM-dd hh:mm"),
        ajax = lf.utils.ajax,
        appAlert = lf.bridgeJs.alert,
        log = lf.utils.log;

    var imgUrl = "../public/images/yue/";

    var his_info = {
		launch:'30',
		involved: '40'
	};

    //模拟数据
	var	user_info = {

	};
	var set_label = {
		sex : {
			title: '性别',
			label: ['男', '女', '不限']
		},
		emotion : {
			title:'情感状态',
			label: ['单身','热恋中','已婚','不限']
		},
		cost : {
			title:'费用',
			label: ['我请客','AA']
		}
	}


    var TopInfoList = React.createClass({
    	render:function(){
    		return(
    			<div className="info-list">
    				<form className="mui-input-group">
						<InfoText title="发布主题" tips="请输入主题" type="text"/>
						<InfoChooseLabel  info={set_label.sex} />
						<InfoChooseLabel  info={set_label.emotion} />
					</form>
    			</div>
    		)
    	}
    })

	var MidInfoList = React.createClass({
    	render:function(){
    		var info = this.props.info;
    		return(
    			<div className="info-list">
    				<form className="mui-input-group">
						<InfoChooseLabel  info={set_label.cost} />
						<InfoChoose title="菜式" />
						<InfoText title="邀约人数" tips="填写人数" type="number"/>
					</form>
    			</div>
    		)
    	}
    })

	var BottomInfoList = React.createClass({
    	render:function(){
    		var info = this.props.info;
    		return(
    			<div className="info-list b-list">
    				<form className="mui-input-group">
						<InfoChoose title="时间" />
						<InfoChoose title="地点" />
						<div className="mui-input-row">
							<textarea id="textarea" rows="5" placeholder="多行文本框"></textarea>
						</div>
					</form>
    			</div>
    		)
    	}
    })

	var InfoText = React.createClass({
		render:function(){
			var info = this.props;
			return(
				<div className="mui-input-row">
					<label>{info.title}</label>
					<input type={info.type} className="mui-input-clear input-name" placeholder={info.tips} data-input-clear="5" />
					<span className="mui-icon mui-icon-clear mui-hidden"></span>
				</div>
			)
		}
	})

	var InfoChoose = React.createClass({
		render:function(){
			var info = this.props;
			return(
				<div className="mui-table-view-cell">
					<a className="mui-navigate-right">{info.title}</a>
				</div>
			)
		}
	})

	var InfoChooseLabel = React.createClass({
		render:function () {
			var info = this.props.info;
			var setLabel = info.label.map(function (e) {
				return(
					<span className="c-label">{e}</span>
				)
			});
			return(
				<div className="mui-table-view-cell">
					<p className="mui-pull-left">{info.title}</p>
					<p className="mui-pull-right">{setLabel}</p>
				</div>
			)
		}
	})


	var BottomButton = React.createClass({
		render:function(){
			return(
				<div className="bottom-btn">
					<a href="#" className="mui-btn mui-btn-primary mui-btn-block">发布</a>
				</div>
			)
		}
	})

	var ChooseBar = React.createClass({
		render:function () {
			return(
				<div></div>
			)
		}
	})


    var Compose = React.createClass({
    	render:function(){
    		console.log(user_info.list_msg);
    		return(
    			<div className="yue-rice-edit">
    				<TopInfoList />
					<MidInfoList />
					<BottomInfoList />
					<BottomButton />
					<ChooseBar />
    			</div>
    		)
    	}
    })

    r.render(
    	<Compose />,
    	document.getElementById('root'),function(){
			$('#root').css('background-color','#ededed');
		}
    );

})( liefeng, React)
